<template>
    <div class="img-loader">
        <div class="img-container">
            <item-img-loader :img-url="url"
                             v-for="(url,index) in imgList"
                             :key="index"
                             :index="index"
                             @onDeleteClick="deletePic"/>
            <btn-add-img :max-num="maxPicNum" @addPic="addPic"/>
        </div>
    </div>
</template>

<script type="text/ecmascript-6">
    import BtnAddImg from './BtnAddImg';
    import ItemImgLoader from './ItemImgLoader';
    import {commonMixin} from '@/common/mixin';

    export default {
        name: 'img-uploader',

        data() {
            return {
                picList: [], // 上传oss图片列表
                imgList: [] //预览图片列表
            };
        },
        mixins: [commonMixin],
        props: {
            imageList: {
                type: Array,
            },
            maxPicNum: {
                required: true,
                type: Number,
                default: -1
            },
            toastTip: {
                required: true,
                type: String,
                default: 'maxPicNum=-1为无限选取'
            }
        },
        created() {
        },
        mounted() {
            if(this.imageList){
                this.imgList = this.imgList.concat(this.imageList)
            }
        },
        components: {ItemImgLoader, BtnAddImg},

        methods: {
            addPic(file) {
                // todo 图片压缩
                // if (this.canPushMore()) {
                //     this.$emit('beforeLoad');
                //     ImgCompressor.compress(img, (imgEncode) => {
                //         this.picList.push(imgEncode);
                //         this.$emit('afterLoad');
                //     });
                //     // console.log('encode', imgEncode);
                //     // this.picList.push(img);
                // } else {
                //     Toast(this.toastTip);
                // }
                if (!file) {
                    return;
                }
                let max = this.maxPicNum;
                if (max > 0 && this.imgList.length >= max) {
                    this.$toast('至多添加' + max + '张');
                    return;
                }
                const type = ['image/jpeg', 'image/jpg', 'image/png'];
                if (type.includes(file.type)) {
                    this.showGlobaLoading();
                    this.request.upPic({type: 1, file: file}).then(res => {
                        this.imgList.push(res);
                        this.hideGlobaLoading();
                    }, (res) => {
                    });
                    this.$emit('getPics', this.imgList);
                } else {
                    this.$toast('请上传正确格式的图片(jpg/png)');
                }
            },
            deletePic(index) {
                this.imgList.splice(index, 1);
                this.$emit('getPics', this.imgList);
            },
            canPushMore() {
                if (this.maxPicNum < 0) {
                    return true;
                } else {
                    return this.picList.length < this.maxPicNum;
                }
            },
        },
        computed: {},
        watch: {
            imageList(val) {
                this.imgList = val;
            }
        }
    };
</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>
    @import '~assets/main.styl';
    .flex-r
        flex-x()

    .flex-c
        flex-y()

    .center
        flex-center()

    .divider
        divider()

    .space
        space()

    .img-loader
        box-sizing border-box
        background white
        margin-bottom 2vw

    .title
        flex-center()
        justify-content flex-start
        word-main()
        height cell-height
        padding-left 10px

    .img-container
        flex-x()
        justify-content flex-start
        flex-wrap wrap
        box-sizing border-box
        width 92vw

    .wrapper
        width vw(80)
        height vw(80)
        margin 4vw 3vw 2vw 0;
</style>
